<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" @open="open">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      v-loading="formLoading"
    >
      <el-row :span="24">
        <el-col :span="24">
          <el-form-item label="标题:" prop="msgTitle">
            {{formData.msgTitle}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容:" prop="msgContent">
            <Editor v-model="formData.msgContent" height="150px" readonly />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'
import { MessageApi, MessageVO } from '@/api/dr/message'

defineOptions({ name: 'MessageDetail' })
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
// 弹窗的标题
const dialogTitle = ref('查看')
const formLoading = ref(false)

const	formData = ref<MessageVO | any>({})

const getDetail = () => {
  formLoading.value = true
  MessageApi.getMessage(props.data.id).then((data) => {
    console.log('getDetail', data)
    formData.value = data
  }).finally(() => {
    formLoading.value = false
  })
}
const open = () => {
  getDetail()
}
</script>

<style lang="scss" scoped>
</style>
